<template>
  <div style="padding-bottom: 20px">
    <a-row class="form-row" :gutter="24">
      <a-col :lg="8" :md="24" :sm="24" v-if="dataSource.length > 0">
        <a-table
          ref="table"
          bordered
          class="cus_table"
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :scroll="{ y: 144 }"
          :pagination="false"
          :customRow="rowClick"
          :locale="locale"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            columnWidth: '40px',
            type: 'radio',
            getCheckboxProps: () => {
              return { disabled: true }
            },
          }"
        >
          <template slot="index" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
        </a-table>
      </a-col>
      <a-col :lg="dataSource.length > 0 ? 16 : 24" :md="24" :sm="24">
        <div style="padding: 7px 0">
          <a-button style="margin-right: 10px" type="primary" @click="handleReset"> 手动录入 </a-button>
          验光师：
          <a-select
            style="width: 200px"
            placeholder="请选择客户"
            v-model="prescriptForm.optometrist"
            :dropdownMatchSelectWidth="false"
            showSearch
            optionFilterProp="children"
            @change="handleChangeOptometrist"
          >
            <a-select-option v-for="(item, index) in optometristOptions" :key="index" :value="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
        <a-table
          ref="table"
          bordered
          class="cus_table"
          :scroll="{ x: 1000 }"
          size="small"
          rowKey="title"
          :dataSource="prescriptDataSource"
          :loading="loading"
          :pagination="false"
        >
          <a-table-column key="title" title="双光/渐进" data-index="title" :width="100" align="center" />
          <a-table-column key="sph" title="球镜" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rSph"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lSph"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="cyl" title="柱镜" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rCyl"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lCyl"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="ax" title="轴向" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rAx"
                style="width: 100%"
                :precision="0"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lAx"
                style="width: 100%"
                :precision="0"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="add" title="Add" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rAdd"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lAdd"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="bo" title="棱镜" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rBo"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lBo"
                style="width: 100%"
                :precision="2"
                :step="0.25"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>

          <a-table-column key="farPd" title="远用瞳距(mm)" :width="120" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rFarPd"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lFarPd"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="nearPd" title="近用瞳距(mm)" :width="120" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rNearPd"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lNearPd"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="ph" title="瞳高(mm)" :width="90" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rPh"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lPh"
                style="width: 100%"
                :precision="2"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>

          <a-table-column key="farBcva" title="远用VA" :width="120" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rFarBcva"
                style="width: 100%"
                :precision="1"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lFarBcva"
                style="width: 100%"
                :precision="1"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
          <a-table-column key="nearBcva" title="近用VA" :width="120" align="center">
            <template slot-scope="text, record, index">
              <a-input-number
                v-if="index == 0"
                v-model="prescriptForm.rNearBcva"
                style="width: 100%"
                :precision="1"
                :disabled="prescriptForm.id"
              />
              <a-input-number
                v-if="index == 1"
                v-model="prescriptForm.lNearBcva"
                style="width: 100%"
                :precision="1"
                :disabled="prescriptForm.id"
              />
            </template>
          </a-table-column>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  props: {
    organId: {
      type: Number | String | undefined,
      default: undefined,
    },
    prescriptionId: {
      type: Number | String | undefined,
      default: undefined,
    },
  },
  data() {
    return {
      loading: false,
      locale: {
        emptyText: () => (
          <div class="custom-empty" style="height: 92px">
            <p style="color:rgba(153, 153, 153, 1);font-size:12px;height:74px;line-height: 74px;">暂无数据</p>
          </div>
        ),
      },
      selectedRowKeys: [], // Check here to configure the default column
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 40,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        { title: '验光师', dataIndex: 'optometristName', width: 100, align: 'center' },
        {
          title: '验光时间',
          dataIndex: 'createTime',
          width: 150,
          align: 'center',
          customRender: (text, record, index) => moment(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
        },
      ],
      dataSource: [],
      prescriptDataSource: [
        {
          title: 'OD',
        },
        {
          title: 'OS',
        },
      ],
      prescriptForm: {
        // 右眼处方数据
        rSph: null,
        rCyl: null,
        rAx: null,
        rCk: null,
        rBo: null,
        rAdd: null,
        rFarBcva: null,
        rNearBcva: null,
        rFarPd: null,
        rNearPd: null,
        rPh: null,

        // 左眼处方数据
        lSph: null,
        lCyl: null,
        lAx: null,
        lCk: null,
        lBo: null,
        lAdd: null,
        lFarBcva: null,
        lNearBcva: null,
        lFarPd: null,
        lNearPd: null,
        lPh: null,

        optometrist: null,
      },
      optometristOptions: [],
    }
  },
  computed: {},
  watch: {
    organId(val) {
      if (val) {
        this.handleSearchList(val)
      } else {
        this.dataSource = []
        this.prescriptForm = {
          // 右眼处方数据
          rSph: null,
          rCyl: null,
          rAx: null,
          rCk: null,
          rBo: null,
          rAdd: null,
          rFarBcva: null,
          rNearBcva: null,
          rFarPd: null,
          rNearPd: null,
          rPh: null,
          // 左眼处方数据
          lSph: null,
          lCyl: null,
          lAx: null,
          lCk: null,
          lBo: null,
          lAdd: null,
          lFarBcva: null,
          lNearBcva: null,
          lFarPd: null,
          lNearPd: null,
          lPh: null,
          optometrist: null,
        }

        this.selectedRowKeys = []
      }
    },
  },
  //方法集合
  methods: {
    moment,
    handleReset() {
      this.prescriptForm = {
        // 右眼处方数据
        rSph: null,
        rCyl: null,
        rAx: null,
        rCk: null,
        rBo: null,
        rAdd: null,
        rFarBcva: null,
        rNearBcva: null,
        rFarPd: null,
        rNearPd: null,
        rPh: null,
        // 左眼处方数据
        lSph: null,
        lCyl: null,
        lAx: null,
        lCk: null,
        lBo: null,
        lAdd: null,
        lFarBcva: null,
        lNearBcva: null,
        lFarPd: null,
        lNearPd: null,
        lPh: null,
        optometrist: this.prescriptForm.optometrist,
      }
      this.selectedRowKeys = []
    },
    rowClick(record, index) {
      return {
        on: {
          click: () => {
            this.prescriptForm = Object.assign({}, this.prescriptForm, record)
            this.selectedRowKeys = [record.id]
          },
        },
      }
    },
    handleSearchList(customerId) {
      let that = this
      that.loading = true
      let params = { customerId: customerId }
      getAction('/prescription/list', { search: JSON.stringify(params) })
        .then((res) => {
          if (res.code === 200) {
            this.dataSource = res.data.rows

            if (this.prescriptionId) {
              let record = res.data.rows.find((item) => item.id === this.prescriptionId)
              this.prescriptForm = Object.assign({}, this.prescriptForm, record)
              this.selectedRowKeys = [record.id]
            }
          } else {
            that.$message.warning(res.data.message)
          }
        })
        .finally(() => {
          that.loading = false
        })
    },
    handleSearchOptometrist() {
      let that = this
      that.loading = true
      getAction('/person/getPersonByNumType', { type: 4 })
        .then((res) => {
          that.optometristOptions = res
          if (res && res.length > 0) {
            that.prescriptForm.optometrist = res[0].value
          }
        })
        .finally(() => {
          that.loading = false
        })
    },
    handleAdd() {
      this.visible = true
    },
  },
  mounted() {
    this.handleSearchOptometrist()
  },
}
</script>
<style lang="less" scoped>
::v-deep .clicked-row {
  background-color: #aad6ff;
}

.cus_table {
  /* Vue 2.x  */
  /deep/ .ant-table-header {
    overflow-y: hidden !important;
  }

  /deep/ .ant-table-body::-webkit-scrollbar {
    display: none;
  }
}
</style>

